<template>
  <div class="triangle">
    <h1>三角图1</h1>
    <div class="item">
      <triangle-chart ref="t1"> </triangle-chart>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import TriangleChart from "@/components/TriangleChart/index.vue";
@Component({
  name: "Triangle",
  components: { TriangleChart }
})
export default class Triangle extends Vue {
  @Ref("t1")
  private t1!: TriangleChart;

  createTrianglePoint() {
    const x = Math.ceil(Math.random() * 100);
    const rate = Math.random();
    const y = Number(((100 - x) * rate).toFixed(2));
    const z = 100 - x - y;
    return { x, y, z };
  }

  private drawT1() {
    const xLines: TriangelExtraLine[] = [];
    const yLines: TriangelExtraLine[] = [];
    const zLines: TriangelExtraLine[] = [];
    for (let i = 1; i < 20; i++) {
      const xStart = { x: 0, y: i * 5, z: 100 - i * 5 };
      const xEnd = { x: 100 - i * 5, y: i * 5, z: 0 };
      xLines.push({
        points: [xStart, xEnd],
        lineStyle: {
          color: "red",
          width: 1,
          type: "dash"
        }
      });
      const yStart = { x: 100 - i * 5, y: 0, z: i * 5 };
      const yEnd = { x: 0, y: 100 - i * 5, z: i * 5 };
      yLines.push({
        points: [yStart, yEnd],
        lineStyle: {
          color: "green",
          type: "dash"
        }
      });

      const zStart = { x: i * 5, y: 0, z: 100 - i * 5 };
      const zEnd = { x: i * 5, y: 100 - i * 5, z: 0 };
      zLines.push({
        points: [zStart, zEnd],
        lineStyle: {
          color: "#0961c3",
          type: "dash"
        }
      });
    }

    this.t1.setOptions({
      showGrid: false,
      series: [
        {
          label: "分组1",
          icon: {
            type: "circle",
            fill: "pink",
            stroke: "#7821b9",
            stroekWidth: 2,
            size: 15
          },
          points: (() => {
            const points = [];
            for (let i = 0; i < 50; i++) {
              points.push(this.createTrianglePoint());
            }
            return points;
          })()
        },
        {
          label: "分组2",
          icon: {
            type: "diamond",
            fill: "blue",
            size: 15
          },
          points: (() => {
            const points = [];
            for (let i = 0; i < 20; i++) {
              points.push(this.createTrianglePoint());
            }
            return points;
          })()
        },
        {
          label: "分组三",
          icon: {
            type: "five-star",
            fill: "yellow",
            size: 15
          },
          points: (() => {
            const points = [];
            for (let i = 0; i < 20; i++) {
              points.push(this.createTrianglePoint());
            }
            return points;
          })()
        }
      ],
      padding: 80,
      axies: {
        label: {
          fontSize: 14,
          bold: true
        },
        x: {
          title: "MCH",
          color: "red"
        },
        y: {
          title: "nC₇",
          color: "green"
        },
        z: {
          title: "RCPC₇",
          color: "#0961c3"
        }
      },
      extraLines: [...xLines, ...yLines, ...zLines],
      extraLabels: [
        {
          point: { x: 30, y: 40, z: 30 },
          label: "I区",
          fontSize: 16,
          fontWeight: "bold",
          color: "purple"
        }
      ]
    });
  }

  mounted() {
    this.drawT1();
  }
}
</script>
<style lang="scss" scoped>
.triangle {
  text-align: center;
  .item {
    margin: 0 auto;
    width: 800px;
    height: 600px;
    border: 1px solid #000;
    &:last-child {
      margin-bottom: 100px;
    }
  }
}
</style>
